import { Avatar, Icon, Menu, Spin } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import React, { Fragment } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import EditPassword from './EditPassword';

class AvatarDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showEditPassword: false
    };
  }

  onMenuClick = event => {
    const { key } = event;
    if (key === 'logout') {
      const { dispatch } = this.props;
      if (dispatch) {
        dispatch({
          type: 'login/logout',
        });
      }
      return;
    }
    if (key === 'editPassword') {
      this.setState({
        showEditPassword: true
      })
      return;
    }
    router.push(`/account/${key}`);
  };
  onEditPasswordCancel=()=>{
    this.setState({
      showEditPassword: false
    })
  }
  render() {
    const {
      // currentUser = {
      //   avatar: '',
      //   name: '',
      // },
      menu,
    } = this.props;
    const { showEditPassword } = this.state;
    let currentUser = JSON.parse(localStorage.getItem('YYuser'));
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {/* {menu && (
          <Menu.Item key="center">
            <Icon type="user" />
            <FormattedMessage id="menu.account.center" defaultMessage="account center" />
          </Menu.Item>
        )}
        {menu && (
          <Menu.Item key="settings">
            <Icon type="setting" />
            <FormattedMessage id="menu.account.settings" defaultMessage="account settings" />
          </Menu.Item>
        )}
        {menu && <Menu.Divider />} */}
        <Menu.Item key="editPassword">
          <Icon type="lock" />
          <span>修改密码</span>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="logout">
          <Icon type="logout" />
          <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
        </Menu.Item>
      </Menu>
    );
    return currentUser && currentUser.username ? (
      <Fragment>
        <HeaderDropdown overlay={menuHeaderDropdown}>
          <span className={`${styles.action} ${styles.account}`}>
            {/* <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" /> */}
            <span className={styles.name}>{currentUser.username}</span>
          </span>
        </HeaderDropdown>
        { showEditPassword && <EditPassword onCancel={this.onEditPasswordCancel}/>}
      </Fragment>

    ) : (
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
